#app {
  max-width: 7.5rem;
  min-height: 100%;
  height: 100%;
  margin: 0 auto;
  font-size: .28rem
}

a.router-link-exact-active {
  color: #fd5315!important
}

.toast-fade-enter-active,.toast-fade-leave-active {
  -webkit-transition: opacity .5s;
  transition: opacity .5s
}

.toast-fade-enter,.toast-fade-leave-to {
  opacity: 0
}

.dialog-fade-enter-active,.dialog-fade-leave-active {
  -webkit-transition: all .3s;
  transition: all .3s
}

.dialog-fade-enter,.dialog-fade-leave-to {
  opacity: 0
}

.view {
  position: absolute;
  width: 100%;
  max-width: 7.5rem;
  min-height: 100%;
  padding-bottom: .98rem!important;
  background: #f6f6f6;
  opacity: 1;
  -webkit-transition: opacity .2s cubic-bezier(.25,.25,.75,.75);
  transition: opacity .2s cubic-bezier(.25,.25,.75,.75)
}

.view-active {
  padding-bottom: 0!important
}

.view-fade-enter,.view-fade-enter-active {
  opacity: 0
}

.view-fade-leave,.view-fade-leave-active {
  -webkit-transition: opacity 0s;
  transition: opacity 0s;
  opacity: 0
}

html {
  color: #000;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%
}

html * {
  outline: 0;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent
}

body,html {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 100%;
  min-height: 100%;
  font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;
  overflow-x: hidden
}

body {
  background: #eee
}

div {
  -webkit-box-sizing: border-box;
          box-sizing: border-box
}

article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul {
  margin: 0;
  padding: 0
}

input,select,textarea {
  font-size: 100%
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

ol,ul {
  list-style: none
}

caption,th {
  text-align: left
}

h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
  font-weight: 400
}

q:after,q:before {
  content: ""
}

sub,sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sup {
  top: -.5em
}

sub {
  bottom: -.25em
}

a {
  text-decoration: underline
}

i {
  font-style: normal
}

a,ins {
  text-decoration: none
}

a {
  -webkit-tap-highlight-color: transparent
}

a,a:visited {
  color: #333
}

img {
  border: 0;
  vertical-align: middle;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent
}

::-webkit-input-placeholder {
  color: #ccc
}

::-moz-placeholder {
  color: #ccc
}

::-ms-input-placeholder {
  color: #ccc
}

@media only screen and (min-width: 1100px) {
  html {
      font-size:70px!important
  }
}


/* loading */
.loading {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999999;
	opacity: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.loading-active {
	opacity: 1;
}
.loading-content {
	position: absolute;
	left: 50%;
	top: 18%;
	padding: .26rem .3rem;
	border-radius: .1rem;
	font-size: .22rem;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, .7);
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0);
}
.loading-content i {
	position: relative;
	display: inline-block;
	margin-right: .05rem;
	margin-bottom: 0.2rem;
	font-size: .4rem;
	vertical-align: middle;
}
.loading-content span {
	display: block;
}
.loop {
	-webkit-animation: loading-loop .8s linear infinite;
	animation: loading-loop .8s linear infinite;
}
@-webkit-keyframes loading-loop {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes loading-loop {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}


/*弹窗组件样式*/
.tipBox {
	top: 0;
	left: 0;
	position: fixed;
	z-index: 100000000000000;
	height: 100%;
	width: 100%;
	opacity: 0;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.tipBox-active {
	opacity: 1;
}

.tipBox .mask {
	opacity: 1;
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .6);
}

.alert,
.confirm {
	position: fixed;
	z-index: 5000;
	width: 88%;
	max-width: 6rem;
	top: 50%;
	left: 50%;
	-webkit-box-shadow: 1px 1px 18px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 1px 18px 2px rgba(0, 0, 0, 0.5);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 0.06rem;
	overflow: hidden;
	box-sizing: border-box;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-color: #fafafc;
}

.confirm > .msg {
	padding: 0 0.5rem;
	margin: 0.2rem 0 0.3rem 0;
	line-height: 1.5;
	font-size: 0.28rem;
	text-align: center;
}

.alert p {
	text-align: left !important;
	margin-bottom: 0.1rem;
	font-size: 0.3rem !important;
}

.alert > .msg {
	margin: 0.2rem 0 0.4rem 0;
	padding: 0 0.5rem;
	line-height: 1.5;
	text-align: center;
	color: #333;
	font-size: 0.28rem;
}

.cancelBtn {
	color: #777 !important;
}

.tipBox .title {
	padding: 0.3rem 0 0.2rem 0;
	font-size: 0.32rem;
	font-weight: 400;
	color: #222;
	text-align: center;
}

.tipBtn {
	height: 0.9rem;
	line-height: 0.9rem;
	border-top: 1px solid #eee;
	font-size: 0.32rem;
	text-align: center;
	color: #06bb04;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.tipBtn a {
	display: block;
	cursor: pointer;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.confirmBtn {
  color: #FF5A7C!important;
}

.tipBtn a:active {
	background-color: #dad9d9;
}

.cancelBtn {
	border-right: 1px solid #d5d5d6;
}

#tip .msg {
	position: fixed;
	top: 40%;
	left: 50%;
	z-index: 100000000000000;
	margin-bottom: 0.3rem;
	font-size: 0.26rem;
	color: #fff !important;
	overflow: hidden;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	background-color: #0c0c0c;
	padding: 0.22rem 0.4rem;
	border-radius: 0.1rem;
	opacity: .75;
	font-size: 0.3rem;
}

/* 留言 */
.list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  padding: 0.5rem 0.3rem 0.2rem 0.3rem;
  background: #fff;
}

.list-item::after {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 11;
	width: 200%;
	border-bottom: 1px solid #eee;
	-webkit-transform: scale(.5);
	transform: scale(.5);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	content: " ";
}

.list-item > img {
  width: 0.93rem;
  height: 0.93rem;
  margin-right: 0.18rem;
  border-radius: 50%;
}
.list-item .list-item__avatar img {
  width: 0.93rem;
  height: 0.93rem;
  margin-right: 0.18rem;
  border-radius: 50%;
}
.list-item .list-middle {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.list-item .list-middle .list-middle__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.list-item .list-middle .list-middle__title .left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.list-item .list-middle .list-middle__title h2 {
  font-size: 0.34rem;
  color: #333;
  margin-right: 0.2rem;
}
.list-item .list-middle .list-middle__title span {
  color: #999;
  font-size: 0.24rem;
  margin-right: 0.2rem;
}
.list-item .list-middle .list-middle__title i {
  width: 0.76rem;
  height: 0.33rem;
  line-height: 0.33rem;
  text-align: center;
  border: 1px solid #f69a30;
  font-size: 0.26rem;
  color: #F69A30;
  border-radius: 0.17rem;
}
.list-item .list-middle .list-middle__title .offline {
  color: #999 !important;
  border: 1px solid #999 !important;
}
.list-item .list-middle .list-middle__title--btn {
  padding: 0 0.23rem;
  height: 0.46rem;
  line-height: 0.46rem;
  color: #fff;
  font-size: 0.28rem;
  background: linear-gradient(229deg, #ff5a7c 0%, #ff8677 100%);
  border-radius: 0.23rem;
}
.list-item .list-middle .list-middle__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0.13rem 0 0.23rem 0;
  color: #999;
  font-size: 0.24rem;
}
.list-item .list-middle .list-middle__info span {
  margin-right: 0.13rem;
}
.list-item .list-middle .list-middle__info span:last-child {
  margin-right: 0;
}
.list-item .list-middle .list-middle__content {
  margin-bottom: 0.1rem;
}
.list-item .list-middle .list-middle__content .list-middle__content-text {
  width: 5.36rem;
  font-size: 0.28rem;
  color: #333;
  line-height: 1.3;
}
.list-item .list-middle .list-middle__content .list-middle__content-img {
  font-size: 0;
}
.list-item .list-middle .list-middle__content .list-middle__content-img img {
  width: 1.41rem;
  height: 1.53rem;
  margin-right: 0.24rem;
  margin-bottom: 0.2rem;
  border-radius: 0.1rem;
}
.list-item .list-middle .list-middle__content .list-middle__content-img img:nth-of-type(3n) {
  margin-right: 0;
}
.list-item .list-middle .list-middle__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.list-item .list-middle .list-middle__bottom .list-middle__bottom-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.list-item .list-middle .list-middle__bottom .list-middle__bottom-right i {
  width: 0.76rem;
  height: 0.33rem;
  line-height: 0.33rem;
  text-align: center;
  border: 1px solid #f69a30;
  font-size: 0.26rem;
  color: #F69A30;
  border-radius: 0.17rem;
}
.list-item .list-middle .list-middle__bottom .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 0.44rem;
  color: #999;
  font-size: 0.26rem;
}
.list-item .list-middle .list-middle__bottom .item i {
  padding-right: 0.04rem;
  font-size: 0.2rem;
}
.list-item .list-middle .list-middle__bottom .item:last-child {
  margin-right: 0;
}

.comment {
  min-height: 100%;
  background: #f4f4f4;
}
.comment > .list-item {
  border: none;
}
.comment .comment-wrap {
  margin-top: 0.2rem;
}

.article-btn {
  bottom: 1.64rem;
}
